<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabArr" :key="index"></el-tab-pane>
    </el-tabs>
    <div class="box-wrap" :style="{height: tabHeight}" ref="box">
      <keep-alive>
        <component :is="activeName"
                   @toTop="toTop"
                   ref="current"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import baseInfo from './baseInfo'
  import flowStep from './flowStep'
  import interfaceBus from './interface'
  import fieldsConfig from './fieldsConfig'
  import dicConfig from './dicConfig'
  export default {
    name: 'index1',
    props: {
      tabHeight: {type: String, default: 'calc(100% - 50px)'} // 工单配置页高度
    },
    data () {
      return {
        activeName: '', // 当前激活tab
        tabArr: [{label: this.$t('webchat.basicInfo'), name: 'baseInfo'}, {label:this.$t('configLazyLoad.businessConfig.processSteps'), name: 'flowStep'}, {label: this.$t('configLazyLoad.businessConfig.dockingConfiguration'), name: 'interfaceBus'}, {label: this.$t('configLazyLoad.businessConfig.fieldConfiguration'), name: 'fieldsConfig'}, {label: this.$t('configLazyLoad.dicConfig.dicConfig'), name: 'dicConfig'}]
      }
    },
    inject: ['busType'],
    components: {
      baseInfo,
      flowStep,
      interfaceBus,
      fieldsConfig,
      dicConfig
    },
    watch: {
    },
    methods: {
      // tab切换时，初始化当前tab
      handleClick () {
        this.$nextTick(() => {
          this.$refs.current.initData()
        })
      },
      // 工单流程图滚动到顶部
      toTop (data) {
        this.$refs.box.scrollTop = data - 70
      },
      /*
      * 页面初始化
      * */
      init (_id) {
        this.activeName = this.busType === 'newFlow' ? 'flowStep' : 'baseInfo'
        if (_id) {
          this.fetchData(_id).then(() => {
            // 工单配置页，初始化工单信息
            this.$nextTick(() => {
              this.$refs.current.initData()
            })
          })
          // 初始化工单所用字段
          if (this.busType === 'detailFlow') {
            this.$store.dispatch('queryAllBusinessFlowFields', {flow_id: _id}).then((res) => {
              if (res.success) {
                this.$store.commit('flowConfig/UPDATE_FLOW_FIELD', {type: 'all', data: res.data})
              }
            })
          } else {
            this.$store.commit('flowConfig/UPDATE_FLOW_FIELD', {type: 'all', data: []})
          }
        }
      },
      /*
      * 获取工单数据
      * */
      fetchData (_id) {
        this._id = _id
        return this.$store.dispatch('queryBusinessFlowSteps', {flow_id: this._id}).then((res) => {
          if (res.success) {
            let steps = res.data || []
            // 把开始步骤放到第三个
            let isHasBegin = steps.some((item, index) => {
              if (item.isBegin) {
                steps[index] = steps.splice(2, 1, steps[index])[0]
                return true
              }
            })
            // 没有开始步骤，前端自动创建开始
            if (!isHasBegin) {
              return this.$store.dispatch('addBusinessStartStepFlow', {_id: this._id}).then((res2) => {
                if (res2.success) {
                  res.data.splice(2, 0, res2.data)
                }
                this.$store.commit('flowConfig/UPDATE_FLOW_INFO', {type: 'replace', data: res.flowInfo})
                this.$store.commit('flowConfig/UPDATE_FLOW_STEP', {type: 'replace', data: res.data})
              })
            } else {
              this.$store.commit('flowConfig/UPDATE_FLOW_INFO', {type: 'replace', data: res.flowInfo})
              this.$store.commit('flowConfig/UPDATE_FLOW_STEP', {type: 'replace', data: res.data})
            }
          }
        })
      }
    },
    beforeMount () {
      // 初始化tab,新建工单页面没有'工单信息'和'对接'
      this.activeName = this.busType === 'newFlow' ? 'flowStep' : 'baseInfo'
      this.tabArr = this.tabArr.filter((item) => {
        if (this.busType === 'newFlow' && (item.name === 'baseInfo' || item.name === 'interfaceBus')) {
          return false
        }
        return true
      })
    }
  }
</script>

<style scoped lang='stylus'>
  .tab
    padding-left 10px
    box-sizing border-box
  .box-wrap
    overflow-y auto
</style>
